<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      #box1 {
        width: 100px;
        height: 100px;
        background-color: yellow;
      }
    </style>

    <script type="text/javascript">
      window.onload = function () {
        //点击按钮以后,读取box1的样式
        var box1 = document.getElementById('box1');
        var btn01 = document.getElementById('btn01');

        btn01.onclick = function () {
          //读取box1的宽度
          // alert(box1.style.width);
          /* 
            获取当前元素显示的样式
              语法:
                元素.currentStyle.样式名
              它可以用来读取当前元素正在显示的样式
                如果当前元素没有设置该样式,则获取它的默认值

            currentStyle只有IE浏览器支持,其他的浏览器都不支持 
          */
          alert(box1.currentStyle.width);
          alert(box1.currentStyle.backgroundColor);

          /* 
            在其他浏览器中可以使用
                getComputedStyle()这个方法来获取元素当前的样式
                这个方法是window的方法,可以直接使用
            需要两个参数
                第一个: 要获取样式的元素
                第二个: 可以传递一个伪元素,一般都传null

            该方法返回一个对象,对象中封装了当前元素对应的样式.
          */
          var obj = getComputedStyle(box1, null);
          alert(obj.width);

          alert(getStyle(box1, 'width'));

          var w = getStyle(box1, 'width');
          alert(w);
        };
      };

      /* 
        定义一个函数,用来获取指定元素当前的样式
          参数: 
            obj 要获取样式的元素
            name 要获取的样式名
      */
      function getStyle(obj, name) {
        /* 
          变量如果没找到,报错
          加window后,变为属性,属性如果没找到,返回false
        */
        if (window.getComputedStyle) {
          //正常浏览器的方法,具有getComputedStyle()方法
          return getComputedStyle(obj, null)[name];
        } else {
          //IE8的方法,没有getComputedStyle()方法
          return obj.currentStyle[name];
        }
      }
    </script>
  </head>
  <body>
    <button id="btn01">点我一下</button>
    <br />
    <br />
    <div id="box1" style="width: 200px; background-color: red"></div>
  </body>
</html>
